const signalRConnection = new signalR.HubConnectionBuilder().withUrl(`/guids-hub`).build();

const $errorBox = $('.error-box');

const $firstGuid = $('.guids > .first-guid');
const $secondGuid = $('.guids > .second-guid');
const $result = $('.guids > .result');

const $lastClosestResult = $('.last-closest-result');
const $lastClosestFirstGuid = $lastClosestResult.find('.first-guid > .value');
const $lastClosestSecondGuid = $lastClosestResult.find('.second-guid > .value');
const $lastClosestFirstCharsEqual = $lastClosestResult.find('.first-chars-equal > .value');

signalRConnection.on('CollisionChecked', function (response) {
    $firstGuid.text(response.first);
    $secondGuid.text(response.second);
    $result.text(response.resultText);

    $lastClosestFirstGuid.text(response.closestResult.first);
    $lastClosestSecondGuid.text(response.closestResult.second);
    $lastClosestFirstCharsEqual.text(response.closestResult.equalFirstCharactersCount);

    if (response.collided) {
        document.title = 'NOT WAITING FOR ANYTHING!!!';
    }
});

signalRConnection.start()
    .catch(() => {
        showError('Could not connect to the server! Please try refreshing the page.')
    });

signalRConnection.onclose(() => {
    showError('Connection to the server is closed! Please try refreshing the page.')
});

function showError(text) {
    $errorBox.text(text);
    $errorBox.show();
}